<template>
	<div class="screen-watermark-dialog">
		<el-dialog title="屏幕水印配置" width="60%" :visible.sync="visible" :before-close="close" class="">
			<div class="content-wrapper">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
					<el-form-item label="内容" prop="content">
						<el-select v-model="ruleForm.content" multiple placeholder="请选择水印内容">
							<el-option v-for="item in contentOptions" :key="item.value" :label="item.label"
								:value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="字体" prop="font">
						<el-select v-model="ruleForm.font" placeholder="请选择字体">
							<el-option v-for="item in fontOptions" :key="item.value" :label="item.label"
								:value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="字号" prop="fontSize">
						<el-select v-model="ruleForm.fontSize" placeholder="请选择字号">
							<el-option v-for="item in fontSizeOptions" :key="item.value" :label="item.label"
								:value="item.value"> </el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="颜色" prop="color">
						<el-color-picker v-model="ruleForm.color"></el-color-picker>
					</el-form-item>
					<el-form-item label="水印宽度" prop="width">
						<el-input placeholder="请输入水印宽度" v-model.number="ruleForm.width"></el-input>
					</el-form-item>
					<el-form-item label="水印高度" prop="height">
						<el-input placeholder="请输入水印高度" v-model.number="ruleForm.height"></el-input>
					</el-form-item>
					<el-form-item label="水平偏移量" prop="x">
						<el-input placeholder="请输入水平偏移量" v-model.number="ruleForm.x"></el-input>
					</el-form-item>
					<el-form-item label="垂直偏移量" prop="y">
						<el-input placeholder="请输入垂直偏移量" v-model.number="ruleForm.y"></el-input>
					</el-form-item>
					<el-form-item label="透明度" prop="alpha">
						<el-slider v-model="ruleForm.alpha"></el-slider>
					</el-form-item>
					<el-form-item label="旋转角度" prop="angle">
						<el-input placeholder="请输入旋转角度" v-model.number="ruleForm.angle"></el-input>
					</el-form-item>
					<div class="button-wrapper">
						<el-button type="primary" @click="restore">还原</el-button>
						<el-button type="primary" @click="preview">预览</el-button>
					</div>
				</el-form>
				<div class="iframe-wrapper">
					<iframe ref="iframe" allowTransparency="true" width="100%" height="100%" :src="previewLink"></iframe>
				</div>
			</div>
			<div class="btn">
				<el-button @click="cancel">取消</el-button>
				<el-button @click="save">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import { updateConfig } from '@/api/api.js';
export default {
	components: {},
	props: {
		visible: {
			type: Boolean,
			default: () => false
		},
		id: {
			type: [Number, String],
			default: '',
			required: true
		},
		option: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			ruleForm: {
				content: ['username', 'loginTime'],
				font: 'SimSun',
				fontSize: 20,
				color: '#000000',
				width: 300,
				height: 300,
				x: 0,
				y: 260,
				alpha: 10,
				angle: -45
			},
			rules: {
				content: [{ required: true, message: '请选择水印内容', trigger: 'change' }],
				width: [
					{ required: true, message: '请输入水印宽度', trigger: 'blur' },
					{ type: 'number', message: '水印宽度必须是数值', trigger: 'blur' }
				],
				height: [
					{ required: true, message: '请输入水印高度', trigger: 'blur' },
					{ type: 'number', message: '水印高度必须是数值', trigger: 'blur' }
				],
				x: [
					{ required: true, message: '请输入水平偏移量', trigger: 'blur' },
					{ type: 'number', message: '水平偏移量必须是数值', trigger: 'blur' }
				],
				y: [
					{ required: true, message: '请输入垂直偏移量', trigger: 'blur' },
					{ type: 'number', message: '垂直偏移量必须是数值', trigger: 'blur' }
				],
				angle: [
					{ required: true, message: '请输入水印宽度', trigger: 'blur' },
					{ type: 'number', message: '请输入旋转角度', trigger: 'blur' }
				]
			},
			contentOptions: [
				{
					value: 'username',
					label: '用户名'
				},
				{
					value: 'loginTime',
					label: '登录时间'
				}
			],
			fontOptions: [
				{
					value: 'SimSun',
					label: '宋体'
				},
				{
					value: 'NSimSun',
					label: '新宋体'
				},
				{
					value: 'FangSong, STFangsong',
					label: '仿宋'
				},
				{
					value: 'KaiTi, STKaiti',
					label: '楷体'
				},
				{
					value: 'SimHei',
					label: '黑体'
				},
				{
					value: 'Arial',
					label: 'Arial'
				},
				{
					value: 'Arial Black',
					label: 'Arial Black'
				},
				{
					value: 'Times New Roman',
					label: 'Times New Roman'
				},
				{
					value: 'Courier New',
					label: 'Courier New'
				},
				{
					value: 'Tahoma',
					label: 'Tahoma'
				},
				{
					value: 'Verdana',
					label: 'Verdana'
				}
			],
			fontSizeOptions: [
				{
					value: 10,
					label: '10'
				},
				{
					value: 12,
					label: '12'
				},
				{
					value: 14,
					label: '14'
				},
				{
					value: 16,
					label: '16'
				},
				{
					value: 18,
					label: '18'
				},
				{
					value: 20,
					label: '20'
				},
				{
					value: 22,
					label: '22'
				},
				{
					value: 26,
					label: '26'
				},
				{
					value: 30,
					label: '30'
				},
				{
					value: 36,
					label: '36'
				}
			],
			previewLink: watermarkPreviewUrl + '/static/watermark/index.html'
		};
	},
	mounted() {
		this.ruleForm = { ...this.ruleForm, ...this.option };

		this.$nextTick(() => {
			this.$refs.iframe.onload = () => {
				this.preview();
			};
		});
	},
	computed: {
		...mapState({
			loginInfo: state => state.login.userInfo
		})
	},
	methods: {
		close() {
			this.$emit('cancel');
		},
		changeSelect(val) {
			this.$emit('changeSelect', val);
		},
		currentChange(val) {
			this.$emit('currentChange', val);
		},
		changePageSize(pageSize) {
			this.$emit('changePageSize', pageSize);
		},
		changeCurrentPage(page) {
			this.$emit('changeCurrentPage', page);
		},
		save() {
			this.$refs.ruleForm.validate(valid => {
				if (!valid) {
					console.log('error submit!!');
					return false;
				} else {
					let text = '';
					if (this.ruleForm.content.includes('username')) {
						text = text + this.loginInfo.name;
					}
					if (this.ruleForm.content.includes('loginTime')) {
						const localDate = this.$moment(this.loginInfo.loginTime).format('YYYY-MM-DD HH:mm:ss'); // 格式化时间戳
						text = text + ' ' + localDate;
					}

					const value = {
						value: {
							txt: text,
							param: this.ruleForm,
							// "scale": 0.9,
							// "width": 88,
							// "height": 88,
							// "position": "nw",
							// "watermark": "http://zco-fileupload.oss-cn-shanghai.aliyuncs.com/df14cea0d4071452fb0917a26e865fb2.png"
						}
					};
					updateConfig(this.id, value).then(res => {
						console.log(res);
						const { status, data = {} } = res;
						if (status === 200) {
							this.$emit('cancel');
							this.$parent.getConfigList();
						}
					});
				}
			});


		},
		cancel() {
			this.$emit('cancel');
		},
		preview() {
			let text = '';
			if (this.ruleForm.content.includes('username')) {
				text = text + this.loginInfo.name;
			}
			if (this.ruleForm.content.includes('loginTime')) {
				const localDate = this.$moment(this.loginInfo.loginTime).format('YYYY-MM-DD HH:mm:ss'); // 格式化时间戳
				text = text + ' ' + localDate;
			}
			this.$refs.iframe.contentWindow.postMessage(
				{
					type: 'watermark',
					param: this.ruleForm,
					txt: text
				},
				'*'
			);
		},
		restore() {
			this.ruleForm = {
				content: ['username', 'loginTime'],
				font: 'SimSun',
				fontSize: 20,
				color: '#000000',
				width: 300,
				height: 300,
				x: 0,
				y: 260,
				alpha: 10,
				angle: -45
			}
		}
	}
};
</script>

<style lang="less" scoped>
.screen-watermark-dialog {
	.content-wrapper {
		display: flex;
		position: relative;

		form {
			width: 40%;

			// button {
			// 	float: right;
			// }
			.button-wrapper {
				display: flex;
				justify-content: flex-end;
			}
		}

		.iframe-wrapper {
			width: 54%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 43%;
			right: 0;
		}

		iframe {
			border: 1px #ccc solid;
		}
	}

	.btn {
		text-align: right;
		margin-top: 20px;

		.el-button {
			background-color: #6384fe;
			color: #fff;
		}
	}
}
</style>
